<template>
  <div class="app-container">
    <el-radio-group v-model="tabPosition" @change="getList" style="margin-bottom: 30px;">
      <el-radio-button :label="1">日报表</el-radio-button>
      <el-radio-button :label="2">月报表</el-radio-button>
    </el-radio-group>
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="运营商" prop="operatorId">
           <el-select
               v-model="queryParams.operatorId"
               placeholder="请选择运营商"
               clearable
               style="width: 240px"
           >
             <el-option
                 v-for="item in operatorList"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
             />
           </el-select>
        </el-form-item>
        <el-form-item v-if="tabPosition == 2" label="选择时间" prop="mdateRange">
          <el-date-picker
            v-model="queryParams.mdateRange"
            value-format="yyyy-MM"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-else label="选择时间" prop="ydateRange">
          <el-date-picker
            v-model="queryParams.ydateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column align="center" label="时间" prop="reportTime" />
      <el-table-column align="center" label="运营商" prop="operatorName" />
      <el-table-column align="center" label="充电用户数" prop="chargingUsersCount" />
      <el-table-column align="center" label="订单金额" prop="payableAmount" />
      <el-table-column align="center" label="实收金额" prop="actualAmount" />
      <el-table-column align="center" label="服务费金额" prop="serviceAmount" />
      <el-table-column align="center" label="充电时长" prop="chargingDuration"/>
      <el-table-column align="center" label="充电电量" prop="electricQuantity"/>
      <el-table-column align="center" label="优惠金额" prop="preferentialAmount"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="text" icon="el-icon-view" @click="handleDetail(row)"
            v-hasPermi="['report:station:list']">查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 详情弹框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body destroy-on-close>
      <div class="diy-mx-8">
        <div class="filter-container">
          <el-form :model="popQueryParams" ref="popQueryRef" :inline="true" v-show="showSearch">
            <el-form-item label="站点名称" prop="stationId">
               <el-select
                   v-model="popQueryParams.stationId"
                   placeholder="请选择站点名称"
                   clearable
                   style="width: 240px"
               >
                 <el-option
                     v-for="item in stationList"
                     :key="item.id"
                     :label="item.label"
                     :value="item.id"
                 />
               </el-select>
            </el-form-item>
            <el-form-item v-if="tabPosition == 2" label="选择时间" prop="mdateRange">
              <el-date-picker
                v-model="popQueryParams.mdateRange"
                value-format="yyyy-MM"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-else label="选择时间" prop="ydateRange">
              <el-date-picker
                v-model="popQueryParams.ydateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="popHandleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="popResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table :data="detailList" v-loading="popLodding" :header-cell-style="{fontSize:'14px'}">
            <el-table-column prop="reportTime" align="center" label="时间"></el-table-column>
            <el-table-column prop="stationName" align="center" label="电站名称"></el-table-column>
            <el-table-column prop="chargingCount" align="center" label="充电次数"></el-table-column>
            <el-table-column prop="payableAmount" align="center" label="订单金额"></el-table-column>
            <el-table-column prop="actualAmount" align="center" label="实付金额"></el-table-column>
            <el-table-column prop="serviceAmount" align="center" label="服务费金额"></el-table-column>
            <el-table-column prop="chargingDuration" align="center" label="充电时长"></el-table-column>
            <el-table-column prop="electricQuantity" align="center" label="充电电量"></el-table-column>
            <el-table-column prop="preferentialAmount" align="center" label="优惠金额"></el-table-column>
          </el-table>
          <pagination
            v-show="popTotal>0"
            :total="popTotal"
            :page.sync="popQueryParams.pageNum"
            :limit.sync="popQueryParams.pageSize"
            @pagination="getDayDrtail"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open =false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dailyList,monthlyList } from '@/api/report/financial'
import { eaOperatSelect } from "@/api/station/operator";
import { stationDailyList,stationMonthlyList,stationOptionSelect, } from '@/api/report/station'
export default {
  name: 'Financial',
  dicts:[],
  data() {
    return {
      tabPosition:1,
      operatorList:[],//运营商数据
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      list: [],
      total: 0,
      listLoading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mdateRange:[],
        ydateRange:[],
        operatorId:null,
      },
      // 显示搜索条件
      showSearch: true,
      detailList:[],//详情数据
      popQueryParams: {// 查询参数
        pageNum: 1,
        pageSize: 10,
        mdateRange:[],
        ydateRange:[],
        stationId:null,
      },
      popTotal: 0,//详情总数
      popLodding:false,//详情加载
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      stationList:[],//电站数据
    }
  },
  created() {
    this.eaOperatSelect()
    this.getList()
  },
  methods: {
    async stationOptionSelect(){//电站下拉选择列表
      let res = await stationOptionSelect({operatorId:this.popQueryParams.operatorId})
      this.stationList = res.data || []
    },
    handleDetail(e){//查看详情
      this.popQueryParams.operatorId = e.operatorId
      this.stationOptionSelect()
      this.popResetQuery()
      this.open = true
      this.title = '详情'
    },
    async getDayDrtail(){
      this.popLodding = true
      let api = this.tabPosition == 2 ? stationMonthlyList : stationDailyList
      let queryParams = {...this.popQueryParams}
      let dateRange = this.tabPosition == 2 ? queryParams.mdateRange : queryParams.ydateRange
      if(!dateRange) dateRange = []
      if(dateRange.length) {
        queryParams.startTime = dateRange[0]
        queryParams.endTime = dateRange[1]
      }
      let res = await api(queryParams)
      let rows = res.rows || []
      this.detailList = rows
      this.popTotal = res.total || 0
      this.popLodding = false
    },
    async eaOperatSelect(){//运营商选择列表
      let res = await eaOperatSelect()
      this.operatorList = res.data || []
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    getList() {
      this.listLoading = true
      let queryParams = {...this.queryParams}
      let dateRange = this.tabPosition == 2 ? queryParams.mdateRange : queryParams.ydateRange
      if(!dateRange) dateRange = []
      if(dateRange.length) {
        queryParams.startTime = dateRange[0]
        queryParams.endTime = dateRange[1]
      }
      let api = this.tabPosition == 2 ? monthlyList : dailyList
      api(queryParams).then(response => {
        let rows = response.rows || []
        this.list = rows || []
        this.total = response.total || 0;
        this.listLoading = false
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryRef");
      this.handleQuery();
    },
    popHandleQuery() {
      this.popQueryParams.pageNum = 1;
      this.getDayDrtail()
    },
    /** 重置按钮操作 */
    popResetQuery() {
      this.resetForm("popQueryRef");
      this.popHandleQuery();
    },
  }
}
</script>
<style scoped lang="scss">

</style>
